<script setup lang="ts" name="user">
import UserSearch from './cpns/user-search.vue'
import UserContent from './cpns/user-content.vue'
import UserModal from './cpns/user-modal.vue'

const contentRef = ref<InstanceType<typeof UserContent>>()
const modalRef = ref<InstanceType<typeof UserModal>>()

const handleQueryClick = (formData:any) => {
  // console.log(formData)
  contentRef.value?.fetchUserListData(formData)
}
const handleResetClick = () => {
  contentRef.value?.fetchUserListData()
}
const handleNewClick = () => {
  modalRef.value?.setModalVisible()
}
function handleEditClick(itemData:any) {
  // console.log(itemData)
  modalRef.value?.setModalVisible(false,itemData)
}
</script>

<template>
  <div class="user">
    <user-search @query-click="handleQueryClick" @reset-click="handleResetClick" />
    <user-content ref="contentRef" @new-click="handleNewClick" @edit-click="handleEditClick" />
    <user-modal ref="modalRef" />
  </div>
</template>


<style scoped lang="less">
.user {
  border-radius: 8px;
  overflow: hidden;
}
</style>
